<template>
  <div class="app-container">
    <el-card>
      <header>
        <div>
          <el-button type="primary" @click="handleAdd">
            <i class="el-icon-circle-plus-outline"></i>增加
          </el-button>
          <el-button type="danger" @click="handleDeleteAll">
            <i class="el-icon-delete"></i>删除
          </el-button>
        </div>
        <div class="flex mt-3">
          <el-input
            v-model="listQuery.day"
            placeholder="请输入天数"
            style="width: 17%"
          ></el-input>
          <el-input
            v-model="listQuery.name"
            class="ml-4"
            placeholder="请输入名称"
            style="width: 17%"
          ></el-input>
          <el-date-picker
            v-model="listQuery.add_time"
            class="ml-4"
            placeholder="添加日期"
            style="width: 17%"
            type="date"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          <!-- <el-input
            v-model.number="listQuery.discount_rate"
            class="ml-4"
            style="width: 17%"
            placeholder="请输入折扣率(0-100之间)"
          ></el-input> -->
          <el-input
            v-model="listQuery.price"
            class="ml-4"
            placeholder="请输入价格"
            style="width: 17%"
          ></el-input>
          <div class="ml-4 flex items-center" style="width: 17%">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
          </div>
        </div>
      </header>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" prop="id" width="80"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="价格" prop="cate_name">
          <template slot-scope="scope">
            <div style="display: flex; flex-direction: column">
              <span
                v-for="(item, index) in scope.row
                  .room_background_products_price"
                :key="'价格' + index"
              >{{ item.day }}天：{{ item.price }}金币</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="效果类型" prop="cate_name">
          <template slot-scope="{row}">
            <el-tag v-if="!row.is_dynamic">静态效果</el-tag>
            <el-tag v-else type="warning">动态效果</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="展示图片" prop="picture">
          <template slot-scope="scope">
            <el-popover max-width="420" placement="top" trigger="hover">
              <img
                :src="scope.row.picture"
                alt=""
                style="max-width: 200px; max-height: 200px"
              />
              <img
                slot="reference"
                :src="scope.row.picture"
                alt=""
                style="width: 50px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="静态效果">
          <template slot-scope="{ row }">
            <el-popover max-width="420" placement="top" trigger="hover">
              <img
                :src="row.effect_picture"
                alt=""
                style="max-width: 200px; max-height: 200px"
              />
              <img
                slot="reference"
                :src="row.effect_picture"
                alt=""
                style="width: 50px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="动态效果">
          <template slot-scope="{ row }">
            <el-popover ref="popover" max-width="420" placement="top" trigger="hover">
              <video
                :src="row.special"
                controls
                style="max-width: 400px; max-height: 300px"
              />
              <video
                slot="reference"
                :src="row.special"
                style="width: 50px"
              />
            </el-popover>
          </template>
        </el-table-column>
        -
        <el-table-column label="房间分类">
          <template slot-scope="{ row }">
            <span v-for="item in row.room_background_type">{{ item.room_type.room_type_name }},</span>
          </template>
        </el-table-column>
        <el-table-column label="出售状态">
          <template slot-scope="{ row }">
            <el-tag v-if="row.sell_status === 1" type="success">上架</el-tag>
            <el-tag v-else type="danger">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="add_time"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              plain
              size="mini"
              type="success"
              @click="handleEdit(scope.row)"
            >
              <i class="el-icon-edit-outline"></i>编辑
            </el-button>
            <el-button
              plain
              size="small"
              type="primary"
              @click="handleSend(scope.row)"
            >
              <i class="el-icon-present"></i>赠送
            </el-button>
            <el-button
              plain
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
            >
              <i class="el-icon-delete"></i>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <cus-pagination
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="handleGetData"
      />
    </el-card>

    <!-- 删除弹框 -->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      title="确定删除吗?"
      width="435px"
    >
      <span style=""
      ><em style="font-style: normal; color: red">删除后不可恢复</em
      >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmDel">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 赠送 -->
    <SendDialog
      :sendDialogVisible.sync="sendDialogVisible"
      :sendForm="rowData"
      @sendForm="handleConfirmSend($event)"
    ></SendDialog>

    <!-- 添加编辑 -->
    <addEditModal
      :categoryOption="addCategoryOption"
      :dialogVisible.sync="addDialogVisible"
      :rowData="rowData"
      :status.sync="status"
      :styleLabelOptions="addStyleLabelOption"
      @updateTable="handleSearch"
    ></addEditModal>
  </div>
</template>

<script>
import { deleteData, getData, postSendData } from '@/api/room/backgroundManage'

import SendDialog from '../../sendComponent/SendDialog'
import addEditModal from './childComps/addEditModal'

export default {
  components: {
    SendDialog,
    addEditModal
  },
  data() {
    return {
      listQuery: {
        add_time: undefined,
        day: undefined,
        name: undefined,
        price: undefined,
        page: 1,
        perPage: 10
      },
      categoryOption: [{ id: 0, title: '所有分类' }],
      styleLabelOptions: [{ id: 0, name: '所有风格标签' }],
      multipleSelection: [],
      total: 0,
      tableData: [],
      deleteDialogVisible: false,

      sendDialogVisible: false,
      rowData: {},

      addCategoryOption: [],
      addStyleLabelOption: [],
      addDialogVisible: false,
      status: 'Add'
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleGetData() {
      getData(this.listQuery).then(res => {
        this.tableData = res.data.list
        this.total = res.data.meta.total
      })
    },
    handleSearch() {
      this.listQuery.page = 1
      this.handleGetData()
    },
    handleReset() {
      this.listQuery = {
        add_time: undefined,
        day: undefined,
        name: undefined,
        price: undefined,
        page: 1,
        perPage: 10
      }
      this.handleGetData()
    },

    // 添加
    handleAdd() {
      this.rowData = {}
      this.status = 'Add'
      this.addDialogVisible = true
    },

    // 编辑
    handleEdit(row) {
      this.rowData = row
      this.status = 'Edit'
      this.addDialogVisible = true
    },

    // 赠送
    handleSend(row) {
      this.rowData = row
      this.sendDialogVisible = true
    },
    handleConfirmSend(value) {
      postSendData(value).then(res => {
        if (res.code === 200) {
          this.handleGetData()
          this.sendDialogVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        }
      })
    },

    // 单个删除
    handleDelete(row) {
      this.del_ids = row.id.toString()
      this.deleteDialogVisible = true
    },
    // 一键删除
    handleDeleteAll() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请勾选要删除的数据')
        return
      } else {
        let arr = []
        this.multipleSelection.forEach(item => {
          arr.push(item.id)
        })
        this.del_ids = arr.join(',')
      }
      this.deleteDialogVisible = true
    },
    // 确认删除
    handleConfirmDel() {
      deleteData(this.del_ids).then(res => {
        if (res.code === 200) {
          this.handleGetData()
          this.deleteDialogVisible = false
          this.$notify({
            type: 'success',
            message: '操作成功',
            position: 'bottom-right',
            showClose: false,
            duration: 3000
          })
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style></style>
